<template>
  <user-address :style="{ height: bodyHeight + 'px' }">
    <div slot="address">
      <van-address-edit
        :address-info="AddressInfo"
        :show-delete="true"
        save-button-text="修改"
        :is-saving="saveloading"
        :area-list="addresslist"
        :tel-validator="checkPhoneNumber"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      >
      </van-address-edit>
    </div>
  </user-address>
</template>

<script>
import { AddressEdit, Area } from 'vant';
import userAddress from '../components/address.vue';
import addresslist from 'config/data/citys.json'; // 数据文件
import 'vant/lib/address-edit/style/less';
export default {
    name: 'edit-adddress',
    props: ['receive'],
    components: {
        userAddress,
        [AddressEdit.name]: AddressEdit,
        [Area.name]: Area
    },
    data () {
        return {
            addresslist,
            bodyHeight: 0,
            saveloading: false,
            AddressInfo: {}
        };
    },
    created () {
        this.bodyHeight = this.$util.ScreenCanUseHeight();
        this.AddressInfo = Object.assign(
            {
                id: this.receive._id
            },
            this.AddressInfo,
            this.receive
        );
    },
    methods: {
        onSave (data) {
            // 数据格式
            const { name, tel, province, city, areaCode, addressDetail } = data;
            const sendData = {
                addressId: this.receive._id,
                data: { name, tel, province, city, areaCode, addressDetail }
            };
            this.$api.addressApi
                .update(sendData)
                .then(res => {
                    if (res.code === 2021) {
                        this.$util.successToast(res.message);
                        setTimeout(() => {
                            this.$emit('updateNew', data);
                            this.$router.back(-1);
                        }, 1200);
                    }
                })
                .catch(err => {
                    throw err;
                });
        },
        onDelete (data) {
            this.$api.addressApi.delete({ addressId: data._id }).then(() => {
                this.$emit('deleteAdd', data._id);
                this.$router.back(-1);
            });
        },
        checkPhoneNumber (value) {
            return value;
        }
    }
};
</script>

<style scoped lang="less"></style>
